/*滚屏样式*/
.swiper-container{width: 100%;}
.swiper-container .swiper-wrapper{width: 100%;}
.swiper-container .swiper-slide{width: 100%;height: 100%;}
/*滚屏圆点*/
.swiper-pagination-bullet{background: rgba(0, 0, 0, 0);border: 2px solid rgba(0, 0, 0, 0.8);opacity:0.5;width: 4px;height: 4px;}
.swiper-pagination-bullet-active{background: rgba(0, 0, 0, 0);border: 2px solid rgba(0, 0, 0, 0.8);}
/*滚屏背景色*/
.swiper-container .swiper-slide:nth-of-type(1n){background:#000000;}
.swiper-container .swiper-slide:nth-of-type(2n){
	background: -webkit-linear-gradient(right top,red,orange);  
    background: -o-linear-gradient(right top,red,orange);  
    background: -mos-linear-gradient(right top,red,orange);  
    background: linear-gradient(right top,red,orange);  }
.swiper-container .swiper-slide:nth-of-type(3n){
	background: -webkit-linear-gradient(right top,limegreen,cyan);  
    background: -o-linear-gradient(right top,limegreen,cyan);  
    background: -mos-linear-gradient(right top,limegreen,cyan);  
    background: linear-gradient(right top,limegreen,cyan);  }
.swiper-container .swiper-slide:nth-of-type(4n){
	background: -webkit-linear-gradient(right top,blue,magenta);  
    background: -o-linear-gradient(right top,blue,magenta);  
    background: -mos-linear-gradient(right top,blue,magenta);  
    background: linear-gradient(right top,blue,magenta);  }
/*.swiper-container .swiper-slide:nth-of-type(5n){
	background: -webkit-linear-gradient(right top,#222,#000);  
    background: -o-linear-gradient(right top,#222,#000);  
    background: -mos-linear-gradient(right top,#222,#000);  
    background: linear-gradient(right top,#222,#000);  }*/




/*第一页*/
.header{background: url(../img/dbrtwo.png);background-size:100% 100% ;width: 100%;overflow: hidden;height: auto;background-repeat: no-repeat;}
.movie {width: 100%;height: 100%;}
.movie__card {position: relative;width: 100%;height: 100%; }
.movie [class*="layer"] {position: absolute;left: 0;top: 0;right: 0;bottom: 0;border-radius: 10px; }
.movie .layer-1 {background-image: url(../img/dbrtwo3.png);background-size: 100% 100%; background-repeat: no-repeat;}
.movie .layer-2 {background-image: url(../img/dbrtwo2.png);background-size: 100% 100%;-webkit-transform: translateZ(30px);transform: translateZ(30px); background-repeat: no-repeat;}
.movie .layer-3 {background-image: url(../img/dbrtwo1.png);background-size: 100% 100%;-webkit-transform: translateZ(50px);transform: translateZ(50px); background-repeat: no-repeat;}

/*设计图片*/
.swiper-slide .Own_img li:nth-of-type(1){opacity:0;transform:translateX(-200px);transition:all .8s;}
.swiper-slide .Own_img li:nth-of-type(2){opacity:0;transform:translateX(-200px);transition:all .7s;}
.swiper-slide .Own_img li:nth-of-type(3){opacity:0;transform:translateX(-200px);transition:all .6s;}
.swiper-slide .Own_img li:nth-of-type(4){opacity:0;transform:translateX(-200px);transition:all .5s;}
.swiper-slide .Own_img li:nth-of-type(5){opacity:0;transform:translateX(-200px);transition:all .4s;}
.swiper-slide .Own_img li:nth-of-type(6){opacity:0;transform:translateX(200px);transition:all .4s;}
.swiper-slide .Own_img li:nth-of-type(7){opacity:0;transform:translateX(200px);transition:all .5s;}
.swiper-slide .Own_img li:nth-of-type(8){opacity:0;transform:translateX(200px);transition:all .6s;}
.swiper-slide .Own_img li:nth-of-type(9){opacity:0;transform:translateX(200px);transition:all .7s;}
.swiper-slide .Own_img li:nth-of-type(10){opacity:0;transform:translateX(200px);transition:all .8s;}
.ani-slide .Own_img li:nth-of-type(n){transform:translateX(0);opacity:1;}
.swiper-slide .Own_img{opacity:0;}
.ani-slide .Own_img{opacity:1;}
.Own_img{width: 60%;margin: 0 auto;height: auto;position: absolute;top: 50%; transform: translateY(-50%);margin-left: 20%;}
.Own_img ul{width: 100%;}
.Own_img li{width: 20%;height: auto;float: left;}
.Own_img li img{width: 90%;margin: 5%;transition: box-shadow .2s linear;}
.Own_img li img:hover{box-shadow:0 10px 20px rgba(0,0,0,0.5);}
.Own_img_d{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0,0,0,0.5);display: none;}
.Own_img_d img{width: 20%;height: auto;position: absolute;}

/*六角*/
.swiper-slide .succdloc{opacity:0;transform:translateY(-200px);transition:all .4s;}
.ani-slide .succdloc{transform:translateY(0);opacity:1;}
.succdloc{width: 100%;position: absolute;}
.hexGrid {overflow: hidden;width: 60%;margin: 0 auto;font-family: 'Raleway', sans-serif; font-size: 15px;}
.hexGrid:after {content: "";display: block;clear: both;}
.hex {position: relative;list-style-type: none; float: left;overflow: hidden;visibility: hidden;outline:1px solid transparent;
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {position: absolute; visibility: visible;outline:1px solid transparent;}
.hexIn {display:block;width: 100%;height: 100%;text-align: center;color: #fff;overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}
.hexIn a{display:block;color: #eee;}
.hex img {left: -100%;right: -100%;width: auto;height: 100%;margin: 0 auto;}
.hex .ah1, .hex .ap {width: 102%;left:-1%; padding: 5%;box-sizing:border-box;background-color: rgba(0, 0, 0, 0.8);font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex .ah1 {bottom: 50%;padding-top:50%;font-size: 1.5em;z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex .ah1:after {content: '';position: absolute;bottom: 0;left: 45%;width: 10%;text-align: center;border-bottom: 1px solid #fff;}
.hex .ap {top: 50%;padding-bottom:50%;
    -webkit-transform:translateY(100%) translatez(-1px);
        -ms-transform:translateY(100%) translatez(-1px);
            transform:translateY(100%) translatez(-1px);
}
.hexIn:hover .ah1, .hexIn:focus .ah1,.hexIn:hover .ap, .hexIn:focus .ap{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);}
.hex {width: 17.2%; /* = (100-3) / 4 */ padding-bottom: 20%; /* =  width / sin(60deg) */}
.hex:nth-child(1),.hex:nth-child(10){margin-left: 14.5%;}
.hex:nth-child(5){margin-top: -4%;margin-bottom: -4%;margin-left: 5.5%;}
.hex:nth-child(2),.hex:nth-child(3),.hex:nth-child(4),.hex:nth-child(11),.hex:nth-child(12),.hex:nth-child(13){margin-left: 1%;}
.hex:nth-child(6),.hex:nth-child(7),.hex:nth-child(8),.hex:nth-child(9){margin-top: -4%; margin-bottom: -4%;margin-left: 1%;}

/*自我介绍*/
.swiper-slide .information .information_l{		opacity:0;transform:translateY(-200px);transition:all .8s;}
.swiper-slide .information .information_r div{	opacity:0;transform:translateX(200px);transition:all .8s;}
.swiper-slide .information .information_r p{	opacity:0;transform:translateY(200px);transition:all .8s;}
.ani-slide .information .information_l{			transform:translateY(0);opacity:1;}
.ani-slide .information .information_r div{		transform:translateX(0);opacity:1;}
.ani-slide .information .information_r p{		transform:translateY(0);opacity:1;}
.information{width:50%;height: auto;position: absolute;top: 50%; transform: translateY(-50%);margin-left: 25%;}
.information_l{float: left;width: 40%;}
.information_l img{width: 100%;}
.information_r{float: right;width: 50%;color: #eee;}
.information_r h1{font-size: 2rem;line-height: 4rem;margin-top: 1rem;}
.information_r p{font-size: 1rem;line-height: 2rem;margin-top: 2rem;}

/*音乐*/
.music{width: 117px;height: 62px;position: fixed;bottom: 10px;left:-62px;z-index: 999;}
.music .musicl{width: 45px;height: 45px;margin-top: 10px;padding-left: 10px;}
.music .musicl img{width: 100%;height: 100%;float: left;}
.music .bofangr{width: 60px;height: 100%;background: url(../img/Maroon5.jpg) no-repeat;background-size: 100% 100%;border: 1px solid #dddddd;}
.music .bofang{width: 100%;height: 100%;}
.music .bol1{background: url(../img/bofangqi1.png) no-repeat;background-size: 100% 100%;}
.music .bol2{background: url(../img/bofangqi2.png) no-repeat;background-size: 100% 100%;}

@media screen and (min-width:300px) and (max-width:800px) {
	
	.movie .layer-1,.movie .layer-2,.movie .layer-3 {background-size: contain;top: 50%; transform: translateY(-40%);position: absolute;}
	
	.Own_img{width: 90%;margin: 0 auto;height: auto;position: absolute;top: 50%; transform: translateY(-50%);margin-left: 5%;}
	.Own_img ul{width: 100%;}
	.Own_img li{width: 33%;height: auto;float: left;}
	.Own_img li img{width: 90%;margin:5%;transition: box-shadow .2s linear;}
	.Own_img li:nth-of-type(10){display: none;}
	.Own_img li img:hover{box-shadow:0 10px 20px rgba(0,0,0,0.5);}
	.Own_img_d img{width: 60%;}
	
	.hexGrid {width: 100%;}
	
	.hex {width: 31%; /* = (100-3) / 4 */ padding-bottom: 36%; /* =  width / sin(60deg) */}
	.hex:nth-child(1){margin-left: 19%;}
	.hex:nth-child(2){margin-left: 1.1%;}
	.hex:nth-child(3){margin-left: 3%;margin-top: -8%;margin-bottom: -4%;}
	.hex:nth-child(4){margin-left: 1%;margin-top: -8%;margin-bottom: -4%;}
	.hex:nth-child(5){margin-left: 1%;margin-top: -8%;margin-bottom: -4%;}
	.hex:nth-child(6){margin-left: 19%;margin-top: -4.3%;}
	.hex:nth-child(7){margin-left: 1.1%;margin-top: -4.3%;}
	.hex:nth-child(8){margin-left: 3%;}
	.hex:nth-child(9){margin-left: 1%;;}
	.hex:nth-child(10){margin-left: 1%;margin-top: -4%;}
	.hex:nth-child(11){margin-left: 19%;margin-top:-8%;}
	.hex:nth-child(12){margin-left: 1.1%;margin-top: -8%;}
	.hex:nth-child(13){display: none;}
	
	.information{width:70%;height: auto;position: absolute;top: 50%; transform: translateY(-50%);margin-left: 15%;}
	.information_l{float: initial;width: 60%;margin: 0 auto;}
	.information_l img{width: 100%;}
	.information_r{float: initial;width: 100%;color: #eee;}
	.information_r h1{font-size: 1rem;line-height: 2rem;margin-top: 1rem;text-align: center;}
	.information_r h2{font-size: 0.85rem;text-align: center;}
	.information_r p{font-size: 0.7rem;line-height: 1rem;margin-top: 1rem;text-align: center;}
}